<template>
    <div>
        <!-- 
            inline代表行内表单
            刚开始报错 vue.runtime.esm.js?6e6d:619 [Vue warn]: Missing required prop: "value" 加上   value=''
         -->
        <el-form :inline="true" class="demo-form-inline" :model="cForm">
            <el-form-item label="一级分类" >
                <el-select placeholder="请选择" v-model="cForm.category1Id" @change="handler1" :disabled="show">
                    <el-option :label="c1.name" :value="c1.id" v-for="c1 in categoryList1" :key="c1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select placeholder="请选择" v-model="cForm.category2Id" @change="handler2" :disabled="show">
                    <el-option :label="c2.name" :value="c2.id" v-for="c2 in categoryList2" :key="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select placeholder="请选择" v-model="cForm.category3Id" @change="handler3" :disabled="show">
                    <el-option :label="c3.name" :value="c3.id" v-for="c3 in categoryList3" :key="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'CategorySelect',
    props:['show'], 
    data() {
        return {
            // 一级菜单栏数组
            categoryList1: [],
            // 二级菜单栏数组
            categoryList2: [],
            // 三级菜单栏数组
            categoryList3: [],

            cForm: {
                category1Id: '',
                category2Id: '',
                category3Id: ''
            }
        }
    },
    //组件挂载完毕：想服务器发送请求：获取相应的一级分类的数据
    mounted() {
        //这是获取一级分类的请求函数
        this.getCategory1List();
    },
    methods: {
        // 发起请求，获取一级分类的数据
        async getCategory1List() {
            let result = await this.$API.attr.reqCategory1List();
            if (result.code == 200) {
                this.categoryList1 = result.data;
            }
        },
        // 一级分类的selct事件回调(当一级分类的option发生变化的时候获取相应二级分类的数据)
        async handler1() {
            // 解构数据
            const { category1Id } = this.cForm;
            // 清除二级，三级的数据
            this.categoryList2 = [];
            this.categoryList3 = [];
            this.cForm.category2Id = "";
            this.cForm.category3Id = "";
            // 触发自定义事件，把一级分类的id传入父组件
            this.$emit("getCategoryId", { categoryId: category1Id, level: 1 });
            //通过一级分类的id，获取对应的二级分类
            let result = await this.$API.attr.reqCategory2List(category1Id);
            if (result.code == 200) {
                this.categoryList2 = result.data;
            }
        },
        // 二级分类的selct事件回调(当二级分类的option发生变化的时候获取相应三级分类的数据)
        async handler2() {
            const { category2Id } = this.cForm;
            // 清除三级的数据
            this.categoryList3 = [];
            this.cForm.category3Id = "";
            // 触发自定义事件，把一级分类的id传入父组件
            this.$emit("getCategoryId", { categoryId: category2Id, level: 2 });
            //通过二级分类的id，获取对应的三级分类
            let result = await this.$API.attr.reqCategory2List(category2Id);
            if (result.code == 200) {
                this.categoryList3 = result.data;
            }
        },
        // 三级分类的selct事件回调
        handler3() {
            const { category3Id } = this.cForm;
           // 触发自定义事件，把一级分类的id传入父组件
            this.$emit("getCategoryId", { categoryId: category3Id, level: 3 });
        },

    }
}
</script>

<style>
</style>